<template>
	<view>
		<block v-for="(item, index) in userList" :key="index">
			<navigator :url="'/pages/user/home?uid=' + item.uid" class="member-item">
				<u-avatar class="avatar" :src="item.user.avatar"></u-avatar>
				<view class="user">
					<view>
						<text class="name font-size-lg">{{ item.user.nickname }}</text>
						<text v-if="item.user.gender == 1" class="iconfont icon-nan"></text>
						<text v-if="item.user.gender == 2" class="iconfont icon-nv"></text>
					</view>
					<view class="text-color-assist">
						<text class="mr-10" v-if="item.user.city||item.user.province">{{item.user.city||item.user.province}} |</text>
						<text class="mr-10">{{item.user.identity_label}}</text>
					</view>
				</view>
				<button class="border-radius-lg font-size-sm btn-gz" v-if="item.is_follow" type="default" @tap.stop="cancelFollow(index, item.user.uuid)">互相关注</button>
				<button class="border-radius-lg font-size-sm btn-gz" v-else type="primary" @tap.stop="follow(index, item.user.uuid)">关注</button>
			</navigator>
		</block>
		<!-- 加载状态 -->
		<block v-if="loadStatus != 'none'">
			<block v-if="list.length === 0 && loadStatus == 'nomore'"><u-empty margin-top="100" text="暂无用户" mode="favor"></u-empty></block>
			<block v-else><u-loadmore margin-bottom="50" margin-top="50" :status="loadStatus" /></block>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		list: Array,
		loadStatus: String
	},
	data() {
		return {
			userList: []
		};
	},
	watch: {
		list() {
			this.userList = this.list;
		}
	},
	methods: {
		follow(index, uuid) {
			uni.showLoading({
				mask: true,
				title: '关注中...'
			});
			this.$H.post('user/addFollow', {uuid: uuid}).then(res => {
				if (res.status == 200) {
					this.userList[index].is_follow = true;
				}
				uni.hideLoading();
			});
		},
		cancelFollow(index, uuid) {
			uni.showLoading({
				mask: true,
				title: '取消关注中...'
			});
			this.$H.post('user/addFollow', {uuid: uuid}).then(res => {
				if (res.status === 200) {
					this.userList[index].is_follow = false;
				}
				uni.hideLoading();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.member-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	border-bottom: 1px solid #f5f5f5;
	background-color: #ffffff;
	&:last-child{
		border-bottom: 0;
	}
	
}

.member-item .icon-nv {
	color: #ff4d94;
}

.member-item .icon-nan {
	color: #0091ff;
}

.member-item .avatar {
	margin-right: 20rpx;
}

.member-item .user .name {
	margin-right: 20rpx;
}

.member-item .user .iconfont {
	font-size: 24rpx;
}

.member-item .btn-gz {
	margin-left: auto;
}
</style>
